<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-28 17:04:53
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-09-04 11:47:11
 * @FilePath: \copartner_mobile\pages\user\invoice.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="发票信息" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <view class="box">
      <u-subsection
        class="tabs"
        :list="list"
        :current="current"
        @change="changeTab"
      ></u-subsection>
    </view>
    <view class="content" v-show="current == 0">
      <u-form
        ref="Form1"
        :model="form1"
        :rules="rules1"
        label-position="top"
        :error-type="['toast']"
        :label-style="{ color: '#9A9A9A' }"
      >
        <u-form-item
          v-for="item in form1Modle"
          :label="item.label"
          :prop="item.prop"
          :required="item.required"
        >
          <u-input v-model="form1[item.prop]" :placeholder="item.placeholder" />
        </u-form-item>
      </u-form>
      <view class="tips"
        >注：电子发票和纸质发票具有同等法律效应，可支持报销入账</view
      >
    </view>
    <view class="content" v-show="current == 1">
      <u-form
        ref="Form2"
        :model="form2"
        :rules="rules2"
        label-position="top"
        :error-type="['toast']"
        :label-style="{ color: '#9A9A9A' }"
      >
        <u-form-item
          v-for="item in form2Modle"
          :label="item.label"
          :prop="item.prop"
          :required="item.required"
        >
          <u-input v-model="form2[item.prop]" :placeholder="item.placeholder" />
        </u-form-item>
      </u-form>
      <view class="tips"
        >注：电子发票和纸质发票具有同等法律效应，可支持报销入账</view
      >
    </view>
    <view class="submit flex-center" @click="submit">保存</view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      list: [
        {
          name: "企业",
        },
        {
          name: "个人",
        },
      ],
      current: 0,
      //企业
      form1Modle: [
        {
          label: "抬头",
          prop: "title",
          placeholder: "抬头名称或极速开票六位代码",
          required: true,
        },
        {
          label: "税号",
          prop: "tax_code",
          placeholder: "纳税人识别号或社会统一征信代码",
          required: true,
        },
        {
          label: "开户银行",
          prop: "bank",
          placeholder: "请输入开户银行",
        },
        {
          label: "银行账号",
          prop: "bank_account",
          placeholder: "请输入银行账号",
        },
        {
          label: "企业地址",
          prop: "address",
          placeholder: "请输入企业地址",
        },
        {
          label: "企业电话",
          prop: "mobile",
          placeholder: "请输入企业电话",
        },
      ],
      rules1: {
        title: [
          {
            required: true,
            message: "请填写抬头",
            trigger: "blur",
          },
        ],
        tax_code: [
          {
            required: true,
            message: "请填写税号",
            trigger: "blur",
          },
        ],
      },
      form1: {
        title: "",
        tax_code: "",
        bank: "",
        bank_account: "",
        address: "",
        mobile: "",
      },
      //个人
      form2Modle: [
        {
          label: "抬头",
          prop: "title",
          placeholder: "抬头名称或极速开票六位代码",
          required: true,
        },
      ],
      rules2: {
        title: [
          {
            required: true,
            message: "请填写抬头",
            trigger: "blur",
          },
        ],
      },
      form2: {
        title: "",
      },
    };
  },
  onLoad() {
    this.getData();
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.Form1.setRules(this.rules1);
    this.$refs.Form2.setRules(this.rules2);
  },
  methods: {
    getData() {
      $https("GET", "getInvoice", {}, (res) => {
        if (res.data.errcode == 0) {
          let data = res.data.data.list;
          data.map((item) => {
            if (item.type == 1) {
              this.form2 = {
                title: item.title,
              };
              // this.current = 1;
            } else if (item.type == 2) {
              this.form1 = {
                title: item.title,
                tax_code: item.tax_code,
                bank: item.bank,
                bank_account: item.bank_account,
                address: item.address,
                mobile: item.mobile,
              };
              // this.current = 0;
            }
          });
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    changeTab(index) {
      this.current = index;
    },
    submit() {
      let option;
      if (this.current == 0) {
        this.$refs.Form1.validate((valid) => {
          if (valid) {
            option = JSON.parse(JSON.stringify(this.form1));
            option.type = 2;
            this.sendSubmit(option);
          }
        });
      } else {
        this.$refs.Form2.validate((valid) => {
          if (valid) {
            option = JSON.parse(JSON.stringify(this.form2));
            option.type = 1;
            this.sendSubmit(option);
          }
        });
      }
    },
    sendSubmit(option) {
      if (option.address == null) {
        option.address = "";
      }
      $https("POST", "editInvoice", option, (res) => {
        if (res.data.errcode == 0) {
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 1px;

  .box {
    width: 328rpx;
    margin: 20rpx auto;

    .tabs {
      width: 100%;
    }
  }

  .content {
    padding: 0 40rpx;

    .u-form-item {
      padding: 0;
    }

    .tips {
      font-size: 24rpx;
      color: #e84b4b;
      margin: 20rpx 0;
    }
  }

  .submit {
    color: #fff;
    width: 566rpx;
    height: 88rpx;
    background: $dgreen;
    box-shadow: 0px 2px 14px 2px rgba(0, 0, 0, 0.2);
    border-radius: 48rpx;
    margin: 60rpx auto;
    // position: fixed;
    // bottom:80rpx;
    // left:0;
    // right:0;
    z-index: 2;
  }
}
</style>
